<template>
    <div class="person-position-container">
        <!-- 搜索框 -->
        <div class="search-container">
            <el-form ref="searchFormRef" :inline="true">
                <el-form-item label="姓名">
                    <el-input v-model="searchForm.name" placeholder="请输入姓名搜索" clearable @clear="handleSearchClear"
                        @keyup.enter="handleSearch" style="width: 180px; margin-right: 10px"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="searchForm.idCard" placeholder="请输入身份证号搜索" clearable @clear="handleSearchClear"
                        @keyup.enter="handleSearch" style="width: 200px; margin-right: 10px"></el-input>
                </el-form-item>
                <el-form-item label="社保编码">
                    <el-input v-model="searchForm.socialSecurityCode" placeholder="请输入社保编码搜索" clearable @clear="handleSearchClear"
                        @keyup.enter="handleSearch" style="width: 200px; margin-right: 10px"></el-input>
                </el-form-item>
                <el-form-item label="盒号">
                    <el-input v-model="searchForm.boxNumber" placeholder="请输入盒号搜索" clearable @clear="handleSearchClear"
                        @keyup.enter="handleSearch" style="width: 150px; margin-right: 10px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 数据表格 -->
        <el-table :data="tableData" border style="width: 100%" v-loading="loading" @row-click="handleRowClick">
            <el-table-column prop="name" label="姓名" width="120" sortable></el-table-column>
            <el-table-column prop="idCard" label="身份证号" width="180"></el-table-column>
            <el-table-column prop="socialSecurityCode" label="社保编码"></el-table-column>
            <el-table-column prop="boxNumber" label="盒号" width="80"></el-table-column>
            <el-table-column prop="itemNumber" label="件号" width="80"></el-table-column>
            <el-table-column prop="pageNumber" label="页号" width="80"></el-table-column>
            <el-table-column prop="creationDate" label="创建日期" width="120" sortable></el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
    searchMedicalRecords
} from '@/api/medicalInsurance'

const tableData = ref([])
const loading = ref(false)
const searchForm = ref({})
const searchFormRef = ref(null)
const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0
})

const rules = {
    personName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    positionTitles: [{ required: true, message: '请至少选择一个职务', trigger: 'change' }]
}

// 初始化
onMounted(() => {
    fetchData()
})

// 获取数据
const fetchData = async () => {
    try {
        loading.value = true
        const params = {
            page: pagination.value.currentPage - 1,
            size: pagination.value.pageSize,
        }
        // 遍历 searchForm 的字段，将有值的添加到 params
        Object.keys(searchForm.value).forEach(key => {
            const value = searchForm.value[key];
            if (value !== null && value !== undefined && value !== '') {
                params[key] = value;
            }
        });

        const response = await searchMedicalRecords(params);
        if (!response) return;
        console.log('获取到数据', response)
        tableData.value = response.content
        pagination.value.total = response.totalElements || 0
    } catch (error) {
        // ElMessage.error('获取数据失败: ' + error.message)
    } finally {
        loading.value = false
    }
}

// 搜索
const handleSearch = () => {
    pagination.value.currentPage = 1
    fetchData()
}

// 清空搜索
const handleSearchClear = () => {
    searchFormRef.value?.resetFields();
    handleSearch()
}

// 行点击
const handleRowClick = (row) => {
    console.log('Row clicked:', row)
    // 可以在这里实现行点击的逻辑，如查看详情等
}

// 分页大小改变
const handleSizeChange = (val) => {
    pagination.value.pageSize = val
    fetchData()
}

// 当前页改变
const handleCurrentChange = (val) => {
    pagination.value.currentPage = val
    fetchData()
}

</script>

<style scoped>

.search-container {
    margin-bottom: 20px;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
}
</style>